<template>
    <div class="container">
        <div class="categorise">
            <a v-for="(value,index,key) in categoriselist" :class="[{'active':index===currentIndex},'categoriseItem']" @click="currentIndex=index">{{value}}</a>
        </div> 
        <div class="bookList">
            <div v-for="item in bookList" class="bookItem" >
                <div class="img" @click="goodetail(item.b_id)">
                    <img :src="require('../assets/' + item.img)">
                </div>
                <div class="title" @click="goodetail(item.b_id)">{{item.name}}</div>
                <div class="author">{{item.author}}</div>
                <div v-if="item.discount!=1" class="price">
                    <span class="price_current">￥{{currentPrice(item.price_origin,item.discount)}}</span>
                    <span class="price_origin">{{item.price_origin}}</span>
                </div>
                <div v-else class="price">￥{{item.price_origin}}</div>
            </div>
        </div>
    </div>
</template>
<script>
import axios from "axios"
export default {
  data(){
      return{
          categoriselist:['全部','文学','教育','科技','经济管理','人文社科','生活','励志'],
          currentIndex:0,
          bookList:[]
      }
  },
  props:['sid','search'],
  mounted(){
      axios.get('api/user/search',{
           params:{
              sid:this.$route.params.sid,
              search:this.$route.params.search
          }
        }).then(Response=>{
            console.log(Response);
            if(Response.code===2){
                console.log(Response.msg);
                this.bookList=[...Response.data]
                console.log(this.bookList)
            }else{
                alert(Response.msg);
            }
        })
  },
  methods:{
      goodetail(id){
          console.log(id)
          this.$router.push('/detail/'+ id)
      },
      currentPrice(orgin,discount){
          return orgin*discount
      }
  }
}
</script>
<style scoped>
.container{
    width: 65%;
    margin: 0 auto;
    padding-top: 7.5em
}
.categorise{
    padding-bottom: 1.7em;
    /* border-bottom: solid #DBDBDB 1px */
    
}
.categoriseItem{
    display: inline-block;
    padding-bottom: 1em;
    text-decoration: none;
    margin-right: 1em;
    color: #ADADAD;
    /* color: #A0A2A2; */
    border-bottom: solid #fff 2px;
    cursor: pointer;
}
.categoriseItem:hover{
    border-bottom-color:  #008489;
}
.active{
    color: #555
}
.bookList{
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap
}
.bookItem{
    width: 240px;
    height: 250px;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,.1)
}
.bookItem:hover{
    background-color: #F3F3F3
}
.img{
    margin-top: 10px;
    height: 170px;
    cursor: pointer;
}
/* .img:hover ~.title{
    color: palevioletred
} */
.img>img{
    display: block;
    margin: 0 auto;
    max-width: 90%;
    max-height: 100%;
}
.title,.author,.price{
   text-align: center
}
.title{
    cursor: pointer;
}
.title:hover{
    text-decoration:underline;
    text-decoration-color: #555
}
.author{
    color: grey;
}
.price{
    color: orangered;
}
.price_origin{
    margin-left: 5px;
    text-decoration: line-through;
    color: #555
}
</style>


